<template>
	<div class="page">
		<div class="search-view c-panel">
			<CFilterSearchView
				:data="searchData"
				:loading="data.isLoading"
				@on-search="getWorks">
			</CFilterSearchView>
		</div>
		
		<div class="works-view c-panel">
			<div class="btns-view">
				<Button type="primary" 
					@click="click2Refresh" 
					:loading="data.isLoading">
					刷新作品
				</Button>
			</div>
			<CWorksList2WaitView
				:data="data" 
				@on-click="clickItem2ListView">
			</CWorksList2WaitView>
		</div>
		
		<div class="page-view">
			<Page 
				:total="searchParams.totalsize" 
				:current="searchParams.page"
				:page-size="searchParams.pagesize"
				:page-size-opts="[5, 10, 20, 30]"
				@on-change="click2ChangePage"
				@on-page-size-change="click2ChangePagesize"
				show-sizer 
				show-total
				placement="top">
			</Page>
		</div>
	</div>
</template>

<script>
	import CFilterSearchView from '@/components/CFilterSearchView';
	import CWorksList2WaitView from '@/pages/works/view/CWorksList2WaitView';
	
	import WorksService from '@/services/WorksService.js';

	const $worksService = WorksService();
	
	const $data = {
		searchData: {
			filter: -1,
			condition: '',
			placeholder: '影片名称',
			filters: []
		},
		data: {
			isLoading: false,
			data: []
		},
		searchParams: {
			page: 1,
			pagesize: 5,
			totalsize: 0
		}
	}

	export default {
		components: {
			CFilterSearchView, CWorksList2WaitView
		},
		data() {
			return $data;
		},
		methods: {
			click2Refresh() {
				this.getWorks();
			},
			click2ChangePage(val) {
				this.searchParams.page = val;
				this.getWorks();
			},
			click2ChangePagesize(val) {
				this.searchParams.pagesize = val;
				this.getWorks();
			},
			clickItem2ListView: function(type, params) {//单击
				var $this = this;
				if(type == 'edit') {//编辑
					this.$router.push({name: 'worksEdit', query: {wid: params.row.wid}});
				} else if(type == 'edit-tags') {//编辑
					this.$router.push({name: 'worksDetail', query: {wid: params.row.wid}});
				} else if(type == 'publish') {//发布
					this.$Modal.confirm({
	                    title: "发布作品",
	                    content: "您确定要发布作品吗？",
	                    onOk() {
	                    		$worksService.publish(params.row.wid)
	                    		.then(function(response) {
	                    			var res = response.data;
								var code = res.rescode;
								if(code == 100) {
									$this.data.data.splice(params.index, 1);
									$this.$Message.success(res.msg);
								} else {
									$this.$Message.success(res.msg);
								}
	                    		}, function(error) {
	                    			$this.$Message.success(res.msg);
	                    		})
	                    }
	                });
				} else if(type == 'reject') {//驳回
					this.$Modal.confirm({
	                    title: "驳回作品",
	                    content: "您确定要驳回作品吗？",
	                    onOk() {
	                    		$worksService.reject(params.row.wid)
	                    		.then(function(response) {
	                    			var res = response.data;
								var code = res.rescode;
								if(code == 100) {
									$this.data.data.splice(params.index, 1);
									$this.$Message.success(res.msg);
								} else {
									$this.$Message.success(res.msg);
								}
	                    		}, function(error) {
	                    			$this.$Message.success(res.msg);
	                    		})
	                    }
	                });
				}
			},
			getWorks() {
				var $this = this;
				this.data.isLoading = true;
				$worksService.getWorks2Wait({
					key: $this.searchData.condition,
					page: $this.searchParams.page - 1,
					pagesize: $this.searchParams.pagesize
				})
				.then(function(response) {
					var res = response.data;
					var code = res.rescode;
					if(code == 100) {
						var data = res.data;
						$this.data.data = data;
						console.log(data);
						$this.searchParams.totalsize = res.totalSize;
					} else {
						$this.$Message.error(res.msg);
					}
					$this.data.isLoading = false;
				}, function(error) {
					$this.data.isLoading = false;
					$this.$Message.error("网络异常，请稍后再试！");
				});
			}
		},
		mounted: function() {
			this.getWorks();
		}
	}
</script>

<style scoped>
	.page {
	}
	
	.search-view {
		margin-bottom: 10px;
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
		justify-content: center;
		-webkit-justify-content: center;
		-moz-justify-content: center;
	}
	
	.btns-view {
		margin-bottom: 20px;
	}
	
	.works-view {
		margin-bottom: 80px;
		position: relative;
	}
	
	.page-view {
		text-align: center;
		position: fixed;
		background-color: #fff;
		padding: 15px 0;
		z-index: 999;
		bottom: 0;
		left: 200px;
		right: 0px;
	}
</style>